$theme: '#f1f1f1'!important;

@mixin flex(
    $space: space-between,
    $align: center,
    $direction: row,
    $wrap: wrap
  ) {
    display: flex;
    justify-content: $space;
    align-items: $align;
    flex-wrap: $wrap;
    flex-direction: $direction;
}
@mixin line($line:2){
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
	display: -webkit-box;
	line-clamp: $line;
	-webkit-line-clamp: $line;
	-webkit-box-orient: vertical;
}

@for $i from 1 through 10 {
  .m#{$i}0 { margin: 10px * $i; }
  .p#{$i}0 { padding: 10px * $i; }
  .mt#{$i}0 { margin-top: 10px * $i; }
  .mb#{$i}0 { margin-bottom: 10px * $i; }
  .ml#{$i}0 { margin-left: 10px * $i; }
  .mr#{$i}0 { margin-right: 10px * $i; }
  .pt#{$i}0 { padding-top: 10px * $i; }
  .pb#{$i}0 { padding-bottom: 10px * $i; }
  .pl#{$i}0 { padding-right: 10px * $i; }
  .pr#{$i}0 { padding-left: 10px * $i; }
  .fl#{$i}0 { flex: 0 0 10% * $i; }
  .fw#{$i}0 { width: 10% * $i; }
  .fh#{$i}0 { height: 10% * $i; }
  .w#{$i}0 { width: 10px * $i; }
  .h#{$i}0 { height: 10px * $i; }
  .lh#{$i}0 { line-height: 10px * $i; }
}
